<!--
 * @Descripttion: 轮播素材
 * @version: 0.0.1
 * @Author: gaojiapeng
 * @Date: 2021-11-23 15:30:16
 * @LastEditors: xhzq_gaojiapeng QXL5##YbMd
 * @LastEditTime: 2022-05-31 10:49:22
-->
<template>
  <div class="tool-rotation source-box">
    <div class="title-box">
      <div :style="$methods.setStyle(tempTitleStyle)">文化/Culture</div>
      <div class="sub-title" :style="$methods.setStyle(tempSubTitleStyle)">
        核心价值观
      </div>
    </div>
    <el-carousel
      :autoplay="attr.autoplay"
      :interval="attr.interval * 1000"
      arrow="never"
    >
      <el-carousel-item v-for="(item, index) in textList" :key="index">
        <div class="content">
          <img
            :style="{ width: '60%', height: '80%' }"
            :src="item.src"
            fit="fit"
            alt=""
            draggable="false"
          />
          <div class="content-slogan" :style="$methods.setStyle(tempStyle)">
            {{ item.title }}
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import mixins from "../mixin";

export default {
  mixins: [mixins],
  data() {
    return {
      attr: {
        // 栅格
        span: {
          status: false,
          row: 1,
          column: 1,
        },
        autoplay: true,
        interval: 3,
        fontSize: 30,
        list: [
          {
            title:
              "客户的满意是我们的宗旨客户的满意是我们的宗旨客户的满意是我们的宗旨客户的满意是我们的宗旨客户的满意是我们的宗旨",
            src: require("../../../assets/demo.png"),
          },
          {
            title: "一天当两天半用",
            src: require("../../../assets/demo.png"),
          },
          {
            title: "重汽HOS",
            src: require("../../../assets/demo.png"),
          },
        ],
        titleFontSize: 20,
        subTitleFontSize: 14,
        color: "#000",
      },
    };
  },
  computed: {
    textList() {
      return this.attr.list;
    },
    tempStyle() {
      return {
        fontSize: this.attr.fontSize,
        fontWeight: this.attr.fontWeight,
        color: this.attr.fontColor,
      };
    },
    tempTitleStyle() {
      return {
        fontSize: this.attr.titleFontSize,
        color: this.attr.titleColor,
      };
    },
    tempSubTitleStyle() {
      return {
        fontSize: this.attr.subTitleFontSize,
        color: this.attr.titleColor,
      };
    },
  },
  pageData: {
    type: "basics",
    sort: 10,
    name: "tool-culture",
    version: 1,
    icon: "source/tool-rotation.svg",
    title: "轮播",
    width: 600,
    height: 450,
    config: {
      attr: [
        {
          key: "span",
          title: "栅格布局",
          formType: "layout-span",
          group: "basics",
          type: "Object",
          data: {
            status: false,
            row: 1,
            column: 1,
          },
        },
        {
          key: "titleFontSize",
          data: 20,
          title: "标题大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
        },
        {
          key: "subTitleFontSize",
          data: 14,
          title: "副标题大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
        },
        {
          key: "titleColor",
          data: "#000",
          title: "标题颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
        },
        {
          key: "autoplay",
          title: "自动轮播",
          formType: "changeSwitch",
          group: "basics",
          type: "Boolean",
          data: true,
        },
        {
          key: "interval",
          data: 3,
          title: "轮播间隔",
          formType: "text-number",
          group: "basics",
          type: "Number",
        },
        {
          key: "fontSize",
          data: 30,
          title: "字体大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
        },
        {
          key: "fontColor",
          data: "#ccc",
          title: "字体颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
        },
        {
          key: "fontWeight",
          title: "加粗",
          formType: "weight-select",
          group: "basics",
          type: "String",
          data: "normal",
        },
        {
          key: "list",
          hidden: true,
          data: [
            {
              title: "客户的满意是我们的宗旨",
              src: require("../../../assets/demo.png"),
            },
            {
              title: "一天当两天半用",
              src: require("../../../assets/demo.png"),
            },
            {
              title: "重汽HOS",
              src: "",
            },
          ],
          formType: "culture",
          group:"other",
        },
      ],
    },
  },
};
</script>
<style lang="scss" scoped>
.source-box {
  width: 100%;
  height: 100%;
}
.tool-rotation {
  .title-box {
    padding-left: 5%;
    color: #ccc;
    height: 60px;
    .sub-title {
      margin-top: 5px;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 20px);
    text-align: center;

    .content-slogan {
      font-weight: bold;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .content-value {
      margin-top: -10px;
      color: #fff;
      opacity: 0.7;
    }
  }
}
</style>
<style lang="scss" scoped>
::v-deep {
  .el-carousel__container {
    height: 100% !important;
  }
  .el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    // margin-top: -40px;
  }

  .el-carousel__indicator.is-active button {
    width: 15px;
    background: rgba($color: #fff, $alpha: 0.7);
  }
  .el-carousel__container {
    height: 100% !important;
  }
  .el-carousel--horizontal {
    height: calc(100% - 60px);
  }
}
.tool-rotation {
  height: 100%;
  padding: 20px;
  // background: red;
}
</style>
